<template>
  <div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="规则配置" size="85%" :withHeader="false"
      :visible.sync="innerDrawer" @close="handleClose" :show-close="true">

      <div style="position: relative;margin-bottom: 20px;">
        <div class="drawerTitle">
          <span>规则配置</span>
          <div class="close" @click="handleClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <div class="blockquote-box" style="background-color: #fdf6ec;color: #e6a23c;font-size: 14px;">分销插件--批量配置（对所选择的商品统一配置，保存后，商品列表中的设置参数统一赋值）</div>
      <div class="headers">
        <el-form :inline="true" ref="type_form" :rules="topformRules" :model="formInline" class="demo-form-inline">
          <el-form-item label="发放时间" prop="node_day" :rules="topformRules.newFieldName">
            <el-input v-model="formInline.node_day" placeholder="请输入正整数">
              <template slot="prepend">T+</template>
            </el-input>
          </el-form-item>
          <el-form-item label="时间节点">
            <el-select v-model="formInline.node_type" placeholder="请选择">
              <el-option v-for="item in mouchoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖励规则">
            <el-select v-model="formInline.award_type" placeholder="请选择">
              <<el-option v-for="item in reward_rules" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖励类型">
            <el-select v-model="formInline.level" placeholder="请选择">
              <el-option v-for="item in type_rules" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="padding:20px">
        <el-form ref="allocationform" :model="formData" :rules="formRules" inline>
          <el-table :data="formData.goods_rule" :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
            }">
            <el-table-column label="订单区间" align="center" width="320">
              <template slot-scope="scope">
                <div style="display:flex;align-items: center;margin-bottom:12px;">
                  <el-input-number v-model="scope.row.range_start" controls-position="right"
                    :min="elInputNumberMin(scope.$index)"></el-input-number>
                  <span style="margin:0 5px 0;">--</span>
                  <el-input-number v-model="scope.row.range_end" controls-position="right"
                    :min="0"></el-input-number>
                  <span style="margin-left:5px;">单</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="奖励次数" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`goods_rule.${scope.$index}.range_num`" :rules="formRules.newFieldName">
                  <el-input size="mini" style="width: 100px" controls-position="right" v-model="scope.row.range_num"
                    label=""></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="直推奖励(数值/比例)" align="center">
              <el-table-column label="送积分数" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_1.integral_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_1.integral_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="送提货券数" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_1.voucher_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_1.voucher_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="送积分转化卡" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_1.conversion_card_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_1.conversion_card_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="转化卡时间" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_1.conversion_card_expire_day`"
                    :rules="formRules.newFieldName">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_1.conversion_card_expire_day" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="送现金数" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_1.balance_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_1.balance_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="间推奖励(数值/比例)" align="center">
              <el-table-column label="送积分数" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_2.integral_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_2.integral_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="送提货券数" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_2.voucher_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_2.voucher_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="送积分转化卡" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_2.conversion_card_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_2.conversion_card_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="转化卡时间" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_2.conversion_card_expire_day`"
                    :rules="formRules.newFieldName">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_2.conversion_card_expire_day" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="送现金数" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.level_type_2.balance_num`"
                    :rules="formRules.moneynumber">
                    <el-input size="mini" style="width: 100px" controls-position="right"
                      v-model="scope.row.level_type_2.balance_num" label=""></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
        <el-row style="margin-top:30px;">
          <el-col :span="19">
            <el-button @click="addhang" type="success">增加配置行</el-button>
          </el-col>
          <el-col :span="5" style="text-align: right;">
            <el-button type="primary" style="width: 100px" :loading="butloading" @click="gradeSubmitForm()">保存</el-button>
            <el-button type="warning" style="width: 100px" @click="resetForm()">重置</el-button>
          </el-col>

        </el-row>

      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    props: {},
    components: {},
    data() {
      return {
        butloading:false,
        type_rules: [{
            value: 1,
            label: '仅直推'
          },
          {
            value: 2,
            label: '直推+间推'
          }
        ],
        reward_rules: [{
            value: 1,
            label: '按支付金额'
          },
          {
            value: 2,
            label: '按商品利润金额'
          }
        ],
        mouchoptions: [{
            value: 1,
            label: '支付成功'
          }, {
            value: 2,
            label: '确认收货'
          }, {
            value: 3,
            label: '评价后'
          },
          {
            value: 4,
            label: '过售后期'
          }
        ],
        formData: {
          goods_rule: [{
            range_start: 1,
            range_end: 2,
            range_num: 1,
            level_type_1: {
              level_type: 1,
              integral_num: 0,
              balance_num: 0, //奖励现金
              voucher_num: 0, //代金券数量
              conversion_card_num: 0, //兑换卡数量
              conversion_card_expire_day: 0
            },
            level_type_2: {
              level_type: 2,
              integral_num: 0,
              balance_num: 0, //奖励现金
              voucher_num: 0, //代金券数量
              conversion_card_num: 0, //兑换卡数量
              conversion_card_expire_day: 0
            }
          }],
        },
        formRules: {
          moneynumber: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?%?$/;
              let regex = /%/;
              if (regex.test(value)) {
                let jsx = /^\d+(\.\d{1,2})?%?$/;
                // let jsx = /^(100|\d{1,2})(\.\d{1,2})?%?$/;
                if (jsx.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多两位正小数"));
                }
              } else {
                if (req.test(value)) {
                  if (Number(value) > 999999) {
                    return callback(new Error("数值不能大于999999"));
                  }
                  callback();
                } else {
                  callback(new Error("最多两位正小数"));
                }
              }

            },
            trigger: "change",
          }],
          newFieldName: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+$/;
              if (req.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正整数"));
              }
            },
            trigger: "change",
          }],
        },
        innerDrawer: false,
        topformRules: {
          newFieldName: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^(100|[1-9]?\d)$/;
              if (req.test(value)) {
                callback();
              } else {
                callback(new Error("请输入0-100的整数"));
              }
            },
            trigger: "change",
          }],
        },
        formInline: {
          node_day: 0,
          node_type: 1,
          award_type: 1,
          level: 1,
        },
      };
    },
    methods: {
      //接收父组件传的值
      open() {
        this.innerDrawer = true
      },
      //重置
      resetForm() {
        this.$refs.allocationform.clearValidate();
        this.formData = {
          goods_rule: [{
            range_start: 1,
            range_end: 2,
            range_num: 1,
            level_type_1: {
              level_type: 1,
              integral_num: 0,
              balance_num: 0, //奖励现金
              voucher_num: 0, //代金券数量
              conversion_card_num: 0, //兑换卡数量
              conversion_card_expire_day: 0
            },
            level_type_2: {
              level_type: 2,
              integral_num: 0,
              balance_num: 0, //奖励现金
              voucher_num: 0, //代金券数量
              conversion_card_num: 0, //兑换卡数量
              conversion_card_expire_day: 0
            }
          }],
        }
      },
      //保存
      gradeSubmitForm() {
        let that = this
        that.$refs.type_form.validate((valid, error) => {
          if (valid) {
            that.$refs.allocationform.validate((valid, error) => {
              if (valid) {
                let list = that.formData.goods_rule
                let tmp = {};
                for (let i in list) {
                  //检测是否是最后一个值
                  if (i == list.length - 1) {
                    if (list[i].range_end > 0) {
                      if(list[i].range_end < list[i].range_start){
                        that.$messages.error('最后一条结束区间不得大于开始区间');
                        return
                      }
                    }
                  }else{
                    tmp = list[i];
                    if(list[i].range_end == 0){
                      that.$messages.error('中间的结束区间不能为0（无穷大）');
                      return
                    }
                    if (tmp.range_start) {
                      if (list[Number(i) + 1].range_start <= tmp.range_end) {
                        that.$messages.error('开始区间不能小于等于上一个结束区间');
                        return false;
                      }
                    }
                  }
                }
                let obj = {
                  ...that.formInline,
                  goods_rule:that.formData.goods_rule
                }
                that.butloading = true
                that.$nextTick(() => {
                  that.butloading = false
                  that.handleClose();
                  that.$parent.bathsetting(obj);
                });
              } else {
                that.$messages.error('您有部分配置未完成');
              }
            });
          } else {
            that.$messages.error('请填写发放时间');
          }
        });

      },
      // 增加配置行
      addhang() {
        this.formData.goods_rule.push({
          range_start: 0,
          range_end: 0,
          range_num: 1,
          level_type_1: {
            level_type: 1,
            integral_num: 0,
            balance_num: 0, //奖励现金
            voucher_num: 0, //代金券数量
            conversion_card_num: 0, //兑换卡数量
            conversion_card_expire_day: 0
          },
          level_type_2: {
            level_type: 2,
            integral_num: 0,
            balance_num: 0, //奖励现金
            voucher_num: 0, //代金券数量
            conversion_card_num: 0, //兑换卡数量
            conversion_card_expire_day: 0
          }
        })
      },
      handleClose() {
        this.innerDrawer = false
        setTimeout(() => {
            this.$parent.toggleSelection();
        }, 500);
      },
      elInputNumberMin(index) {
        if (index == 0) {
          return 1;
        }
        if (this.formData.goods_rule[index - 1] == 1) {
          return Number(
            this.formData.goods_rule[index - 1].range_start + 1
          );
        } else {
          return Number(
            this.formData.goods_rule[index - 1].range_start + 1
          );
        }
      },
    }
  };
</script>
<style lang="scss">
</style>

<style lang="scss" scoped>
  .headers {
    padding: 0 20px;
  }
</style>
